<template>
	<el-container>
		<!-- 头部区 -->
		<el-header>
			<div>
				<span style="font-style:oblique; font-weight:bold; font-size:20px;">后台管理系统</span>
			</div>
			<div>
				<el-button type="info" size="small"  @click="logout" style="margin-left: 20px;">退出</el-button>
			</div>
			
		</el-header>
		<!-- 主体区 -->
		<el-container>
			<!-- 侧边栏 -->
			<el-aside width="200px">
				<el-menu background-color="#333744"  text-color="#fff" active-text-color="#4787d5" v-bind:default-active="active" unique-opened router>
					<!-- 一级菜单  index接收的是字符串，所以用 数字+''-->
					<el-submenu v-bind:index="menulist.id+''" v-for="menulist in menulists" v-bind:key="menulist.id">
						<!-- 一级菜单模板区 -->
						<template slot="title">
							<!-- 图标 -->
							<i v-bind:class="menulist.icon"></i>
							<!--文本-->
							<span style="margin-left: 10px;">{{menulist.menuName}}</span>
						</template>				
						<!-- 二级菜单 -->
						<el-menu-item v-on:click="saveActive(second_item.path)" v-bind:index="second_item.path+''" v-for="second_item in menulist.children" v-bind:key="second_item.id">
							<template slot="title">
								<!-- 图标 -->
								<i class="el-icon-menu"></i>
								<!--文本-->
								<span>{{second_item.secondMenuName}}</span>
							</template>	
						
						</el-menu-item>

					</el-submenu>
					
					
				</el-menu>
			</el-aside>

			<!-- 右侧内容 -->
			<el-main>
				<router-view></router-view>
			</el-main>
      <router-view name="apidoc"></router-view>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		created(){
			this.active=window.sessionStorage.getItem("active")
		},
		mounted(){

		},
		data(){
			return{
				//左侧菜单数据
				menulists:[
          {
            menuName:"用户管理",
            children:[
              {
                secondMenuName:"普通用户",
                path:"customer"
              },
              {
                secondMenuName:"管理员",
                path:"manager"
              }
            ]
          },
          {
            menuName:"接口文档",
            children:[
              {
                secondMenuName:"接口文档",
                path:"apidoc"
              },
            ]
          }
        ],
				active:'',
			}
		},
		methods: {
			logout() {
				window.sessionStorage.clear()
				this.$router.push("/login")
			},
			saveActive(active){
				//因为一刷新，选中项就会不高亮，所以存下来，每次created执行，再从sessionStorage中取
				window.sessionStorage.setItem("active",active)
				this.active=window.sessionStorage.getItem("active")
			},
		}
	}
</script>

<style lang="less" scoped>
	/*el组件名，可以直接当类名用*/
	.el-container {
		height: 100%;
	}

	.el-header {
		background-color: #373c41;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/*内部文本*/
		color: white;
		font-size: 20px;

		>div {
			display: flex;
			align-items: center;

			span {
				margin-left: 15px;
			}
		}
	}

	.el-aside {
		background-color: #323744;
		.el-menu{
			border-right: none;
		}
	}
		

	.el-main {
		background-color: #f6f8fa;
	}
</style>
